<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>一个敲桌子 Loading 动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <style>
        * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --hue: 223;
            --sat: 10%;
            --gray0: hsl(0, 0%, 100%);
            --gray1: hsl(var(--hue), var(--sat), 90%);
            --gray2: hsl(var(--hue), var(--sat), 80%);
            --gray3: hsl(var(--hue), var(--sat), 70%);
            --gray4: hsl(var(--hue), var(--sat), 60%);
            --gray5: hsl(var(--hue), var(--sat), 50%);
            --gray6: hsl(var(--hue), var(--sat), 40%);
            --gray7: hsl(var(--hue), var(--sat), 30%);
            --gray8: hsl(var(--hue), var(--sat), 20%);
            --gray9: hsl(var(--hue), var(--sat), 10%);
            --trans-dur: 0.3s;
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
        }

        body {
            background-color: var(--gray0);
            color: var(--gray9);
            display: flex;
            font: 1em/1.5 sans-serif;
            height: 100vh;
            transition: background-color var(--trans-dur), color var(--trans-dur);
        }

        .hand {
            --anim-dur: 1s;
            --anim-timing: cubic-bezier(0.65, 0, 0.35, 1);
            display: block;
            margin: auto;
            width: 9.6em;
            height: auto;
        }

        .hand__finger,
        .hand__finger-inner {
            animation-duration: var(--anim-dur);
            animation-timing-function: var(--anim-timing);
            animation-iteration-count: infinite;
        }

        .hand__finger-inner {
            animation-name: finger-inner;
            fill: var(--gray4);
        }

        .hand__finger--pinky {
            animation-name: pinky;
        }

        .hand__finger--pinky,
        .hand__finger--pinky .hand__finger-inner {
            animation-delay: calc(var(--anim-dur) * 0.16);
        }

        .hand__finger--ring {
            animation-name: ring;
        }

        .hand__finger--ring,
        .hand__finger--ring .hand__finger-inner {
            animation-delay: calc(var(--anim-dur) * 0.12);
        }

        .hand__finger--middle .hand__finger-inner {
            animation-delay: calc(var(--anim-dur) * 0.08);
        }

        .hand__finger--index {
            animation-name: index;
        }

        .hand__finger--index,
        .hand__finger--index .hand__finger-inner {
            animation-delay: calc(var(--anim-dur) * 0.04);
        }

        .hand__finger--thumb .hand__finger-inner {
            animation-name: thumb-inner;
        }

        .hand__finger-inner,
        .hand__nail,
        .hand__skin {
            transition: fill var(--trans-dur);
        }

        .hand__nail {
            fill: var(--gray0);
        }

        .hand__skin {
            fill: var(--gray2);
        }

        @media (prefers-color-scheme:dark) {
            body {
                background-color: var(--gray9);
                color: var(--gray1);
            }

            .hand__finger-inner {
                fill: var(--gray9);
            }

            .hand__nail {
                fill: var(--gray5);
            }

            .hand__skin {
                fill: var(--gray7);
            }
        }

        @keyframes finger-inner {

            from,
            80%,
            to {
                transform: translate(0, 0);
            }

            40% {
                animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
                transform: translate(0, -3px);
            }
        }

        @keyframes thumb-inner {

            from,
            80%,
            to {
                transform: translate(0, 0) skewY(0);
            }

            40% {
                animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
                transform: translate(-0.5px, -3px) skewY(-15deg);
            }
        }

        @keyframes pinky {

            from,
            80%,
            to {
                transform: translate(0, 3.5px);
            }

            40% {
                animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
                transform: translate(0, 1.2px);
            }
        }

        @keyframes ring {

            from,
            80%,
            to {
                transform: translate(6.5px, 1.8px);
            }

            40% {
                animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
                transform: translate(6.5px, 0.5px);
            }
        }

        @keyframes index {

            from,
            80%,
            to {
                transform: translate(19.5px, 2.5px);
            }

            40% {
                animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
                transform: translate(19.5px, 1.2px);
            }
        }
    </style>
</head>

<body>
    <svg class="hand" viewBox="0 0 32 20" width="32px" height="20px">
        <clipPath id="finger-pinky">
            <rect rx="2.5" ry="2.5" width="6" height="15" />
        </clipPath>
        <clipPath id="finger-ring">
            <rect rx="2.5" ry="2.5" width="6" height="18" />
        </clipPath>
        <clipPath id="finger-middle">
            <rect rx="2.5" ry="2.5" width="6" height="20" />
        </clipPath>
        <clipPath id="finger-index">
            <rect rx="2.5" ry="2.5" width="6" height="17" />
        </clipPath>
        <clipPath id="finger-thumb">
            <rect width="6" height="15.2" />
        </clipPath>
        <g class="hand__finger hand__finger--pinky" transform="translate(0,3.5)" clip-path="url(#finger-pinky)">
            <g class="hand__finger-inner">
                <rect class="hand__skin" rx="2.5" ry="2.5" width="6" height="15" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="1.5" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="2.5" />
                <path class="hand__nail"
                    d="M 2 10 H 4 A 1 1 0 0 1 5 11 V 12 A 2 2 0 0 1 3 14 H 3 A 2 2 0 0 1 1 12 V 11 A 1 1 0 0 1 2 10 Z" />
            </g>
        </g>
        <g class="hand__finger hand__finger--ring" transform="translate(6.5,1.8)" clip-path="url(#finger-ring)">
            <g class="hand__finger-inner">
                <rect class="hand__skin" rx="2.5" ry="2.5" width="6" height="18" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="1.5" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="2.5" />
                <path class="hand__nail"
                    d="M 2 13 H 4 A 1 1 0 0 1 5 14 V 15 A 2 2 0 0 1 3 17 H 3 A 2 2 0 0 1 1 15 V 14 A 1 1 0 0 1 2 13 Z" />
            </g>
        </g>
        <g class="hand__finger hand__finger--middle" transform="translate(13,0)" clip-path="url(#finger-middle)">
            <g class="hand__finger-inner">
                <rect class="hand__skin" rx="2.5" ry="2.5" width="6" height="20" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="1.5" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="2.5" />
                <path class="hand__nail"
                    d="M 2 15 H 4 A 1 1 0 0 1 5 16 V 17 A 2 2 0 0 1 3 19 H 3 A 2 2 0 0 1 1 17 V 16 A 1 1 0 0 1 2 15 Z" />
            </g>
        </g>
        <g class="hand__finger hand__finger--index" transform="translate(19.5,2.5)" clip-path="url(#finger-index)">
            <g class="hand__finger-inner">
                <rect class="hand__skin" rx="2.5" ry="2.5" width="6" height="17" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="1.5" />
                <rect rx="0.25" ry="0.25" width="3" height="0.5" x="1.5" y="2.5" />
                <path class="hand__nail"
                    d="M 2 12 H 4 A 1 1 0 0 1 5 13 V 14 A 2 2 0 0 1 3 16 H 3 A 2 2 0 0 1 1 14 V 13 A 1 1 0 0 1 2 12 Z" />
            </g>
        </g>
        <g class="hand__finger hand__finger--thumb" transform="translate(26,0)" clip-path="url(#finger-thumb)">
            <g class="hand__finger-inner">
                <path class="hand__skin"
                    d="M 0 0 C 0 0 0.652 0.986 1.494 1.455 C 2.775 2.169 6 0.763 6 3.018 C 6 5.197 4.62 7 2.61 7 C 1.495 7 0 7 0 7 L 0 0 Z"
                    transform="translate(0,8.2)" />
            </g>
        </g>
    </svg>
</body>

</html>